<template slot-scope="scope">
  <div>
    <el-table
      :data="resData"
      style="width: 100%">
      <el-table-column
        label="序号"
          type="index"
        width="180">
      </el-table-column>
        <el-table-column   label="公告名称"  @click.native="getDetail(scope.$index,scope.row)"  width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native="getDetail(scope.$index,scope.row)">{{scope.row.noticeName}}</el-button>
          </template>
        </el-table-column>
      <el-table-column
        prop="noticeDate"
        label="发布日期" :formatter="dateFormat">
      </el-table-column>
    </el-table>

    <el-dialog
      title="公告详情"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>{{noticeInfo}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
      <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->

    <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          layout=" prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

  </div>
</template>
<script>
 import {listNotice,getNoticeById} from '@/axios/api'//此处是api的方法
 import { formatDate } from '@/common/js/date.js'
      export default{
        data(){
          //返回的数据
          return{
            dialogVisible:false,
            noticeInfo:'',
            pageSize:10,
            pageIndex:1,
            total:100,
            resData:[]
          }
        },
        methods:{
          //时间格式化
          dateFormat:(row, column) => {
            let date = row[column.property];
            if (date == undefined) {
              return "";
            }
            return formatDate(new Date(date), 'yyyy-MM-dd')
          },
          getDetail:function(index,row){
              this.dialogVisible = true ;
              let para = {noticeId:row.noticeId};

            getNoticeById(para).then (res => {
                this.noticeInfo = res.resData.noticeInf;
          })
        },
          handleCurrentChange(val) {
            this.pageIndex = val;
            this.getNoticeMsg();
          },
            getNoticeMsg:function(){
              let param = {pageIndex : this.pageIndex}
              listNotice(param).then(res =>{
                this.total = res.resData.total,
                this.pageSize = res.resData.pageSize,
                this.resData = res.resData.list;
              })
            }
        },
        mounted(){
          this.getNoticeMsg();
        }
      }
</script>
